<template>
	<view class="all" style="padding-bottom: 120rpx;">
		<view class="carp_top">
			<view class="carp_top_1">
				有效期至2022-12-12
			</view>
			<view class="imagea">
				<view :class="index==0?'carp_top_2':'carp_top_2_2'" v-for="(item,index) in 4">
					V{{index+1}}
				</view>
			</view>


		</view>
		<view class="carp" v-for="(item,index) in 4">
			<text class="carp_1">权益一：课程优惠</text>
			<view class="carp_2">
				<view class="carp_2_1">
					<text>课程享受折扣</text>
					<text>*仅限APP使用</text>
				</view>
				<view class="carp_2_2">
					<text>9</text>折
				</view>
			</view>
		</view>
		<view class="mianf">
			<text class="bt">免费课程</text>
			<view class="allim" v-for="(item,index) in 5">
				<view class="m_1">
					<image
						src="https://img0.baidu.com/it/u=1253532332,3769220590&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=480" />
					<view class="m_2">
						<view class="m_2_1">
							沟通训练营：如何跨部门沟通 避免方针指南
						</view>
						<view class="m_2_2">
							<text>580人已观看</text>
							<text>￥120.00</text>
						</view>
					</view>
				</view>
				<view class="xian" v-if="index!=4">

				</view>
			</view>
			<view class="bc">
				续费会员（￥500）
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				image: require('@/static/img/bnjw.png')
			};
		}
	}
</script>

<style lang="scss">
	.bc {
		position: fixed;
		left: 50%;
		margin-left: -190rpx;
		bottom: 20rpx;
		width: 380rpx;
		height: 88rpx;
		background: #FFD500;
		opacity: 1;
		border-radius: 44px;
		text-align: center;
		line-height: 88rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #703F00;
		opacity: 1;
	}

	.allim {
		padding-top: 30rpx;

		.xian {
			height: 1rpx;
			background: #EFEFEF;
			margin-top: 30rpx;
		}
	}

	.mianf {
		background-color: white;
		padding: 30rpx;
		margin-top: 30rpx;

		.m_2 {
			width: 62%;
			position: relative;

			.m_2_2 {
				position: absolute;
				width: 100%;
				bottom: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text:nth-of-type(1) {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #141414;
					opacity: 1;
				}

				text:nth-of-type(2) {
					font-size: 30rpx;
					font-family: HarmonyOS Sans;
					font-weight: bold;
					color: #E61E2A;
					opacity: 1;

				}
			}

			.m_2_1 {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				opacity: 1;
			}
		}

		.m_1 {
			display: flex;
			justify-content: space-between;

			image {
				width: 240rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}
		}

		.bt {
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #333333;
			opacity: 1;
		}

	}

	.imagea {
		display: flex;
		justify-content: space-between;
		padding-left: 50rpx;
		padding-right: 50rpx;
		margin-top: 50rpx;
	}

	.all {
		background-color: #F6F6F6;
		min-height: 1300rpx;

	}

	.carp {
		width: 92%;
		margin: auto;
		padding-top: 50rpx;
		.carp_2 {
			display: flex;
			margin-top: 20rpx;
			justify-content: space-between;
			padding: 30rpx 20rpx 30rpx 20rpx;
			background-color: white;
			align-items: center;
			border-radius: 8rpx;

			.carp_2_2 {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				opacity: 1;

				text:nth-of-type(1) {
					font-size: 42rpx;
					font-family: HarmonyOS Sans;
					font-weight: bold;
					color: #E61E2A;
					opacity: 1;
				}
			}

			.carp_2_1 {
				text:nth-of-type(1) {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					opacity: 1;
				}

				text:nth-of-type(2) {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					margin-top: 20rpx;
					font-weight: 400;
					color: #AAAAAA;
					opacity: 1;

				}

				text {
					display: block;
				}
			}

		}

		.carp_1 {
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #333333;
			opacity: 1;
		}
	}

	.carp_top_1 {
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		background-image: linear-gradient(to right, #F4E0D1, #FAE7D6, #F6CFAC);
		font-weight: 400;
		color: #C4744C;
		opacity: 1;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 300rpx;
		margin: auto;
		height: 68rpx;
		text-align: center;
		line-height: 68rpx;
		border-radius: 8rpx;
	}

	.carp_top {
		width: 92%;
		margin: auto;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url(https://s4.ax1x.com/2022/02/10/HYNLo8.png);
		height: 260rpx;

		.carp_top_2_2 {
			margin-top: 10rpx;
			font-size: 26rpx;
			font-family: ZhenyanGB;
			font-weight: 600;
			color: #B4693D;
			opacity: 1;
			width: 90rpx;
			height: 90rpx;
			border-radius: 100%;
			text-align: center;
			line-height: 90rpx;
			background-size: 100% 100%;
			background-image: url('@/static/img/bjs.png');
		}

		.carp_top_2 {
			font-size: 26rpx;
			font-family: ZhenyanGB;
			font-weight: 600;
			color: #B4693D;
			opacity: 1;
			width: 110rpx;
			height: 110rpx;
			border-radius: 100%;
			text-align: center;
			line-height: 80rpx;
			line-height: 110rpx;
			background-size: 100% 100%;
			background-image: url('@/static/img/bnjw.png');

		}
	}
</style>
